<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2022-11-24 13:07:35
 * @LastEditors: zzb
 * @LastEditTime: 2022-11-24 15:21:29
-->
<template>
  <div id="wordView" v-html="vHtml"></div>
</template>

<script>
import mammoth from "mammoth";
import axios from "axios";
import { getToken } from "@/utils/auth";
export default {
  name: "Name",

  data() {
    return {
      vHtml: "",
      wordURL: this.$route.query.url,
    };
  },

  components: {},

  computed: {},

  mounted() {
    console.log(
      "🚀 ~ file: index.vue ~ line 23 ~ data ~ this.$route.query.url",
      this.$route.query.url
    );
    this.readExcelFromRemoteFile();
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    // 在线查看word文件
    readExcelFromRemoteFile: function () {
      var vm = this;
      var xhr = new XMLHttpRequest();
      xhr.open("get", this.wordURL, true);
      xhr.responseType = "arraybuffer";
      xhr.onload = function () {
        if (xhr.status == 200) {
          mammoth
            .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
            .then(function (resultObject) {
              vm.$nextTick(() => {
                // document.querySelector("#wordView").innerHTML =
                //   resultObject.value;
                vm.vHtml = resultObject.value;
              });
            });
        }
      };
      xhr.send();
      return;
      axios({
        method: "get",
        url: this.wordURL,
        //url: "/dev-api/homepage/kt2/docs/2022/11/24/60faacb9e79348b18f35c581c8f2a42a.docx",
        // responseType: "arraybuffer",
        // withCredentials: true,
        headers: {
          Authorization: getToken(),
        },
      }).then((res) => {
        console.log("🚀 ~ file: index.vue ~ line 68 ~ .then ~ res", res);
        mammoth
          .convertToHtml({ arrayBuffer: new Uint8Array(res.response) })
          .then(function (resultObject) {
            this.$nextTick(() => {
              // document.querySelector("#wordView").innerHTML =
              //   resultObject.value;
              this.vHtml = resultObject.value;
            });
          });
      });
    },
  },
};
</script>

<style scoped lang='scss'>
</style>